<template>
  <div class="settleinfo">
    <!-- <Header-Comp title="结算信息" /> privateoShow-->
    <van-nav-bar
      title="结算信息"
      fixed
      left-arrow
      placeholder
      :right-text="!showSettleBtn ? '' : '结算设置'"
      @click-left="onclickleft"
      @click-right="onClickRight"
    />
    <van-form class="settleinfo_form">
      <div v-if="data.mrcAccount">
        <van-field label="账户类型" class="form_account" readonly>
          <template #input>
            <div v-for="(item, index) in mrcTypeList" :key="index">
              <span v-if="item.dictKey == data.merchantAccountType">{{
                item.dictValue
              }}</span>
            </div>
          </template>
        </van-field>
        <van-field label v-if="privateoShow">
          <template #input class="text-mode">
            <h3 style="flex: 1">对私户信息</h3>
            <span style="color: #ffb72f" @click="onEdit">修改</span>
          </template>
        </van-field>
        <van-field name="img" v-if="privateoShow">
          <template #input>
            <!-- <van-image :src="justImg"
            @click="sceneImg(justImg)" />-->
            <div class="settleinfo-card">{{ data.mrcAccount.accountNo }}</div>
          </template>
        </van-field>
        <van-field
          label-width="120px"
          label="开户名称"
          readonly
          v-if="privateoShow"
        >
          <template #input>{{ data.mrcAccount.accountName }}</template>
        </van-field>
        <van-field
          label-width="120px"
          label="证件号码"
          readonly
          v-if="privateoShow"
        >
          <template #input>{{ data.mrcAccount.accountIdcard }}</template>
        </van-field>
        <van-field
          label-width="120px"
          label="开户银行手机号"
          readonly
          v-if="privateoShow"
        >
          <template #input>{{ data.mrcAccount.bankAccountMobile }}</template>
        </van-field>
        <van-field
          label-width="120px"
          label="银行卡号"
          readonly
          v-if="privateoShow"
        >
          <template #input>{{ data.mrcAccount.accountNo }}</template>
        </van-field>
        <van-field
          label-width="120px"
          label="开户银行"
          readonly
          v-if="privateoShow"
        >
          <template #input>{{ bankNmane }}</template>
        </van-field>
        <!-- <van-field label-width="120px" label="开户省市" readonly v-if="privateoShow">
          <template #input>{{areaNmane}}</template>
        </van-field> -->
        <!-- <van-field label-width="120px" label="开户支行" readonly v-if="privateoShow">
          <template #input>{{BrancNmane}}</template>
        </van-field> -->
      </div>
      <div v-if="data.mrcAccount && male">
        <van-field label>
          <template #input>
            <h3>对公户信息</h3>
          </template>
        </van-field>
        <van-field name="img">
          <template #input>
            <van-image :src="householdImg" @click="sceneImg(householdImg)" />
          </template>
        </van-field>
        <van-field label-width="120px" label="开户名称" readonly>
          <template #input>{{ data.mrcAccount.companyAccountName }}</template>
        </van-field>
        <van-field label-width="120px" label="开户银行手机号" readonly>
          <template #input>{{ data.mrcAccount.companyAccountMobile }}</template>
        </van-field>
        <van-field label-width="120px" label="银行卡号" readonly>
          <template #input>{{ data.mrcAccount.companyAccountNo }}</template>
        </van-field>
        <van-field label-width="120px" label="开户银行" readonly>
          <template #input>{{ companybankNmane }}</template>
        </van-field>
        <van-field label-width="120px" label="开户省市" readonly>
          <template #input>{{ companyareaNmane }}</template>
        </van-field>
        <van-field label-width="120px" label="开户支行" readonly>
          <template #input>{{ companyBrancNmane }}</template>
        </van-field>
      </div>
      <van-field name="proofImg" v-if="proofImg">
        <template #input>
          <van-image :src="proofImg" @click="sceneImg(proofImg)" />
        </template>
      </van-field>
      <van-field
        label-width="120px"
        label="提现设置"
        readonly
        @click="handleTxState"
        input-align="right"
        class="withDraw"
      >
        <template #input>
          <span :class="manualTxState !== '未开启' ? 'grayColor' : ''">{{
            txType
          }}</span>
          <span v-if="manualTxState !== '未开启'">
            <van-icon name="arrow" />
          </span>
        </template>
      </van-field>
    </van-form>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import {
  Bankdetail,
  Branchdetail,
  mrctype,
  getWxAccountByDeptId,
  getManualTxState,
  timeOutReq,
  isUserId,
} from "@/api/mreinfo";
import { getAreatext } from "@/api/area";
import { bankCard, cardSecret, phoneFilter } from "@/utils/utils.js";
import { Dialog } from "vant";
import { settlement } from "@/utils/utils";
export default {
  components: {
    HeaderComp: () => import("@/components/HeaderComp"),
  },
  data() {
    return {
      data: {},
      bankNmane: "",
      BrancNmane: "",
      areaNmane: "",
      companybankNmane: "",
      companyBrancNmane: "",
      companyareaNmane: "",
      PublicoShow: false,
      mrcTypeList: [],
      justImg: "",
      householdImg: "",
      privateoShow: false,
      male: false,
      transactionType: null,
      NoPublic: "",
      txType: "",
      manualTxState: "",
      showSettleBtn: false,
      proofImg: "",
    };
  },
  created() {
    var data = {
      id: this.$route.query.id,
      type: this.$route.query.type,
    };
    this.judgeisUserId(data.id);
    this.$store.dispatch("Getmrcdetail", data).then((res) => {
      this.transactionType = res.transactionType;
      mrctype("mrc_acc_type").then((mrctypeRes) => {
        this.mrcTypeList = mrctypeRes.data;
      });
      getManualTxState().then(({ data }) => {
        switch (data) {
          case 0:
            this.txType = "自动提现";
            this.manualTxState = "未开通";
            break;
          case 1:
            this.txType = "自动提现";
            this.manualTxState = "审核中";
            break;
          case 2:
            this.txType = "手动提现";
            this.manualTxState = "开通成功";
            break;
          case 3:
            this.txType = "自动提现";
            this.manualTxState = "开通失败";
            break;
          case 4:
            this.txType = "自动提现";
            this.manualTxState = "已关闭";
            break;
          case 5:
            this.txType = "自动提现";
            this.manualTxState = "未开启";
        }
        // this.$store.commit("PSettxType", this.txType);
      });
      if (res.mrcAccount.bankIdHo && res.mrcAccount.bankIdHo != "0") {
        Bankdetail(res.mrcAccount.bankIdHo).then((bank) => {
          this.bankNmane = bank.data.bankName;
        });
      }

      if (res.mrcAccount.bankId && res.mrcAccount.bankId != "0") {
        Branchdetail(res.mrcAccount.bankId).then((Branc) => {
          this.BrancNmane = Branc.data.bankName;
        });
      }

      getAreatext({
        provinceCode: res.mrcAccount.accountProvince,
        cityCode: res.mrcAccount.accountCity,
        districtCode: res.mrcAccount.accountDistrict,
      }).then((res1) => {
        if (res1.code == 200) {
          const { province } = res1.data;
          const { city } = res1.data;
          const { district } = res1.data;
          this.areaNmane = province + "  " + city + "  " + district;
        }
      });
      res.mrcAccountAttach.map((v) => {
        if (v.fileType == 5) {
          this.justImg = v.watermarkImg;
        }
        if (v.fileType == 13) {
          this.householdImg = v.watermarkImg;
        }
      });
      let merchantAccountType = Number(res.merchantAccountType);
      let merchantType = Number(res.merchantType);
      let data2 = res.mrcAccount;
      const proofImg = res.mrcAccountAttach.find(
        (item) => item.fileType === "19"
      );
      console.log(merchantType, merchantAccountType);
      if (merchantType == 1 && merchantAccountType == 1) {
        this.male = true;
        data2.companyAccountName = data2.accountName;
        data2.companyAccountNo = data2.accountIdcard;
        data2.companyAccountMobile = data2.bankAccountMobile;
        data2.companyAccountNo = data2.accountNo;
        data2.companyBankIdHo = data2.bankIdHo;
        data2.companyBankId = data2.bankId;
        data2.companyAccountProvince = data2.accountProvince;
        data2.companyAccountCity = data2.accountCity;
        data2.companyAccountDistrict = data2.accountDistrict;
      } else if (merchantType == 1 && merchantAccountType == 2) {
        this.male = true;
        this.privateoShow = true;
      } else if (merchantType == 1 && merchantAccountType == 3) {
        this.male = true;
        this.privateoShow = true;
        this.proofImg = proofImg ? proofImg.filePath : "";
      } else if (merchantType == 2 && merchantAccountType == 1) {
        this.male = true;
        data2.companyAccountName = data2.accountName;
        data2.companyAccountNo = data2.accountIdcard;
        data2.companyAccountMobile = data2.bankAccountMobile;
        data2.companyAccountNo = data2.accountNo;
        data2.companyBankIdHo = data2.bankIdHo;
        data2.companyBankId = data2.bankId;
        data2.companyAccountProvince = data2.accountProvince;
        data2.companyAccountCity = data2.accountCity;
        data2.companyAccountDistrict = data2.accountDistrict;
      } else if (merchantType == 2 && merchantAccountType == 2) {
        this.privateoShow = true;
      } else if (merchantType == 2 && merchantAccountType == 3) {
        this.privateoShow = true;
        this.proofImg = proofImg ? proofImg.filePath : "";
      } else if (merchantType == 3 && merchantAccountType == 2) {
        this.privateoShow = true;
      }
      if (
        (merchantType == 1 && merchantAccountType == 1) ||
        (merchantType == 1 && merchantAccountType == 2) ||
        (merchantType == 1 && merchantAccountType == 3) ||
        (merchantType == 2 && merchantAccountType == 1)
      ) {
        Bankdetail(Number(res.mrcAccount.companyBankIdHo)).then((bank) => {
          this.companybankNmane = bank.data.bankName;
        });
        Branchdetail(Number(res.mrcAccount.companyBankId)).then((bank) => {
          this.companyBrancNmane = bank.data.bankName;
        });
        getAreatext({
          provinceCode: res.mrcAccount.companyAccountProvince,
          cityCode: res.mrcAccount.companyAccountCity,
          districtCode: res.mrcAccount.companyAccountDistrict,
        }).then((res2) => {
          if (res2.code == 200) {
            const { province } = res2.data;
            const { city } = res2.data;
            const { district } = res2.data;
            this.companyareaNmane = province + "  " + city + "  " + district;
          }
        });
      }
      this.data = res;
      this.data.mrcAccount.bankAccountMobile = phoneFilter(
        this.data.mrcAccount.bankAccountMobile
      );
      this.data.mrcAccount.accountIdcard = cardSecret(
        this.data.mrcAccount.accountIdcard
      );
      this.data.mrcAccount.accountNo = bankCard(this.data.mrcAccount.accountNo);

      this.data.mrcAccount.companyAccountMobile = phoneFilter(
        this.data.mrcAccount.companyAccountMobile
      );
      this.data.mrcAccount.companyAccountNo = bankCard(
        this.data.mrcAccount.companyAccountNo
      );
    });
    getWxAccountByDeptId({
      deptId: this.$route.query.deptId || "1123598813738675201",
      wxType: 1,
    }).then((res) => {
      this.NoPublic = res.data.name;
    });
  },

  //方法集合
  methods: {
    onclickleft() {
      const { isBack = null } = this.$route.query
      if(isBack) {
        this.$router.go(-1)
        return
      }
      document.title = "返回APP";
    },
    onEdit() {
      if (this.data.merchantAccountType == 1) {
        Dialog.alert({
          title: "提示",
          confirmButtonColor: "#FFB72F",
          message:
            '您好，对公结算信息修改申请，请前往“"' +
            this.NoPublic +
            "”微信公众号联系客服处理",
        });
        return false;
      }
      if (this.transactionType == 2) {
        Dialog.alert({
          title: "服务暂未开通",
          confirmButtonColor: "#FFB72F",
          message:
            "您好，该功能暂未开通，请前往“" +
            this.NoPublic +
            "”微信公众号联系客服申请修改。",
        });
        return false;
      }
      if (Number(this.data.canChange) == 0) {
        Dialog.alert({
          title: "提示",
          confirmButtonColor: "#FFB72F",
          message: "您的结算卡修改申请正在审核中，请勿重复发起修改申请。",
        });
        return false;
      }
      if (this.settlement.txType == "手动提现") {
        this.$dialog.alert({
          message: `<div style="font-size:16px;line-height:12px;">
                <p>当前提现方式为手动提现时,</p><p style="margin-top:20px;">不支持修改结算卡</p> </div>`,
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        });
      } else {
        this.$router.push({
          path: "/mreinfo/settleedit",
          query: {
            id: this.$route.query.id,
            type: this.$route.query.type,
            token: this.$route.query.token,
          },
        });
      }
    },
    onClickRight() {
      //跳转到结算设置
      if (!this.showSettleBtn) return;
      settlement();
      this.$toast.clear();
    },
    // 图片预览
    sceneImg(images) {
      ImagePreview({
        images: [images], //需要预览的图片 URL 数组
        showIndex: false, //是否显示页码
        loop: false, //是否开启循环播放
      });
    },
    //手动提现
    handleTxState() {
      if (this.manualTxState && this.manualTxState !== "未开启") {
        if (this.manualTxState === "审核中") {
          timeOutReq().then((result) => {
            console.log("result", result);
          });
        }
        this.$router.push({
          path: "/mreinfo/withdrawal",
          // query:{
          //   txType:this.txType,
          //   manualTxState:this.manualTxState
          // }
        });
      }
    },
    judgeisUserId(id) {
      isUserId(id).then((res) => {
        const { data, code } = res;
        code === 200 && (this.showSettleBtn = data);
      });
    },
  },
  computed: {
    settlement() {
      return this.$store.state.settlement;
    },
  },
};
</script>
<style lang='less' scoped>
.settleinfo {
  padding-bottom: 87px;
  //   padding-top: 26px;
  background-color: #f7f7f7;
  .settleinfo_form {
    margin-bottom: 26px;
  }
  .form_account {
    margin-bottom: 28px;
  }
  .settleinfo-card {
    width: 100%;
    height: 400px;
    background: url("../../assets/img/card-bj.png") no-repeat;
    background-size: 100%;
    font-size: 36px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #131313;
    padding-top: 200px;
    padding-left: 50px;
  }
  /deep/ .van-image {
    width: 100%;
    height: 400px;
    background: #191919;
    img {
      width: auto;
      margin: 0 auto;
    }
  }
  /deep/ .van-field__label {
    // font-size: 32px;
    color: #3d3d3d;
  }
  /deep/ .van-field__control {
    // font-size: 32px;
    color: #131313;
  }
}
/deep/ .van-nav-bar__text {
  color: #ffb72f;
}
.grayColor {
  color: #c7c7c7;
}
.alignRight {
  text-align: right;
}
.text-mode {
  display: flex;
  justify-content: space-around;
}
.withDraw {
  margin-top: 20px;
}
</style>